<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.box {
			padding: 10px;
		}

		.box label {
			float: left;
			margin-right: 10px;
		}

		.box input,
		.box select,
		.box textarea {
			border: 1px solid silver;
			padding: 5px;
			width: 500px;
		}

	</style>
</head>

<body>
	<form>
		
		<div class="box">
			<label>标题</label>
			<input type="text" name="title" value="户外垃圾"/>
		</div>
		<div class="box">
			<label>描述</label>
			<textarea rows="5" name="desc">乱扔乱放</textarea>
		</div>
		<div class="box">
			<label>类别</label>
			<select name="type">
				<option checked>安全隐患排查</option>
				<option >社会治安寻访</option>
				<option >矛盾排查化解</option>
				<option >城乡治理协管</option>
			</select>
		</div>
		<div >
			紧急程度
			<label><input type="radio" name="urgent" value="一般" />一般 </label>
			<label><input type="radio" name="urgent" value="紧急" />紧急 </label>
			<label><input type="radio" name="urgent" value="特级" checked/>特级 </label>
		</div>
		<div >
			分发对象
			<label><input type="checkbox" name="goal" value="网格长" checked/>网格长 </label>
			<label><input type="checkbox" name="goal" value="镇街网格" checked/>镇街网格 </label>
			<label><input type="checkbox" name="goal" value="区网格" />区网格  </label>
		</div>
		<div class="box">
			<button type="submit" id="submitBtn">提交</button>
			<button type="reset">重置</button>
		</div>
	</form>
  
  <script>
		var _FORM = document.forms[0];
     function getCheckBoxValue(){
      var chboxs =_FORM.elements["goal"];
          var chboxArr = [];
          chboxs.forEach(function(ee){
						if(ee.checked){
							chboxArr.push(ee.value);
						}
					})
          return chboxArr.toString();
     }
     _FORM.addEventListener('submit',function(event){
			var formData ={
       title:_FORM.elements[0].value,
       desc:_FORM.elements[1].value,
       type:_FORM.elements["type"].value,
       urgent:_FORM.elements["urgent"].value,
       goal:getCheckBoxValue()
     }
          alert(`标题为 ${formData.title}
描述为 ${formData.desc}
类别为 ${formData.type}
紧急程度为 ${formData.urgent}
分发对象为 ${formData.goal}
          `);
          event.preventDefault();
     });
  </script> 
</body>

</html>
